<template>
	<div
		class="transaction-item relative h-[74px] px-2 flex flex-col justify-center rounded-[12px] bg-bg-3">
		<div class="text-sm text-t-3">
			{{ fmtDateTime(data.updatedAt) }}
		</div>
		<div class="my-[2px] flex items-center">
			<base-icon class="text-lg" :name="WalletAction[method]?.icon" v-if="method" />
			<span class="mx-1 text-sm text-t-1">{{ $t(WalletAction[method].name) }}</span>
			<template v-if="+data.type === WalletAction.withdraw.id">
				<div class="text-sm text-t-2 last:ml-1" v-if="data.currencyType === 'flat'">
					<base-image class="w-[18px] mx-2 mb-[2px]" :src="data.bankIcon" type="server" />
					<span>***{{ data.bankAccount }}</span>
				</div>
				<div class="text-sm text-t-2 last:ml-1" v-else>
					<base-image src="/wallet/usdt.svg" class="w-[18px] mx-2 mb-[2px]" />
					<span>USDT({{ data.network }})</span>
					<span>***{{ data.address }}</span>
				</div>
			</template>
			<template v-if="+data.type === WalletAction.recharge.id">
				<img
					class="w-[18px] mx-2 mb-[2px]"
					v-if="data.currencyType === 'flat'"
					src="@/assets/img/wallet/bank.svg"
					alt="" />
				<img
					class="w-[18px] mx-2 mb-[2px]"
					v-else-if="data.currencyType === 'crypto'"
					src="@/assets/img/wallet/usdt.svg"
					alt="" />
				<span v-if="data.admin" class="admin">[Admin]</span>
			</template>
		</div>
		<div class="text-sm text-t-3">
			{{ $t('wallet.transaction.id') }}
			{{ data.transactionId }}
			<base-copy :value="data.transactionId" />
		</div>
		<div class="absolute right-2 text-right">
			<div
				class="text-xs"
				:style="{
					color: enumValue2(WalletBalanceStatus, data.balanceStatus, 'id', 'color')
				}">
				•{{ $t(enumValue2(WalletBalanceStatus, data.balanceStatus)) }}
			</div>
			<up-amount :value="data.balance" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { enumValue2, fmtDateTime } from '@/utils'
import { WalletBalanceStatus } from '@/enums'
import { UpAmount } from '@/components/up'
import { BaseCopy, BaseIcon, BaseImage } from '@/components/base'
import { WalletAction } from '@/types'

const props = defineProps({
	data: {
		type: Object as PropType<any>,
		required: true
	}
})

/* eslint-disable @typescript-eslint/no-unused-vars */
const method: any = computed(
	() =>
		Object.entries(WalletAction).find(([_, value]: [any, any]) => {
			return value.id === Number(props.data.type)
		})?.[0]
)
/* eslint-enable @typescript-eslint/no-unused-vars */
</script>
<style lang="scss" scoped></style>
